<template>
  <view class="cash-code">
    <!--显示图片用的标签-->
    <image class="container" :src="ewmImg"></image>
    <!-- <view class="no-data" v-if="showFlag">暂无数据</view> -->
    <!--创建一个画布，将它移出屏幕外看不到的地方-->
    <canvas
      class="canvas-code"
      canvas-id="myQrcode"
      style="
        background: #fff;
        width: 280px;
        height: 280px;
        display: block;
        left: -800rpx;
        position: absolute;
      "
    />
  </view>
</template>

<script>
import QRCode from "@/utils/weapp-qrcode.js";
import { getStoreData, setStoreData, httpPost, httpGet } from "@/utils/http.js";
const date = new Date();
export default {
  data() {
    return {
      showFlag: false,
      ewmImg: "",
    };
  },
  onShow() {
    this.showFlag = false;
    this.getdataFun();
  },
  methods: {
    getCode(url) {
      new QRCode("myQrcode", {
        text: url,
        width: 280, //canvas 画布的宽
        height: 280, //canvas 画布的高
        padding: 16, // 生成二维码四周自动留边宽度，不传入默认为0
        correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
        callback: (res) => {
			console.log(res)
          this.ewmImg = res.path;
        },
      });
    },
    getdataFun() {
      const _this = this;
      httpGet("/api/sellerstore/cashPayUrl")
        .then((res) => {
          const result = res.data;
          _this.getCode(result);
          _this.showFlag = false;
        })
        .catch((e) => {
          _this.showFlag = true;
        });
    },
  },
};
</script>

<style lang="scss">
.cash-code {
  background: #f8f8f8;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .container {
    width: 280px;
    height: 280px;
    margin: 38% auto;
  }
  .no-data {
    width: 100%;
    color: #666;
    text-align: center;
    margin: 48px;
  }
  .item {
    background: #fff;
    border-radius: 4px;
    margin-bottom: 16px;
    padding: 12px 8px;
    .line {
      border-bottom: 1px solid #eee;
    }
  }
  .text-area {
    width: calc(100vw - 32px);
    color: #333;
    font-size: 14px;
    margin: 16px;
    .tips2 {
      color: #f00;
      text-align: right;
    }
    .title {
      line-height: 30px;
      color: #666;
      margin-left: 16px;
    }
  }
  .u-slot-title1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 40px;
  }
  .u-slot-title2 {
    display: flex;
    flex-direction: column;
  }
  .total {
    width: 120px;
    height: 120px;
    display: flex;
    margin-top: 32px;
    font-size: 14px;
    color: #fff;
    justify-content: center;
    align-content: center;
    background: linear-gradient(-90deg, #f90, #f60);
    box-shadow: 6px 12px 32px 12px rgba(247, 213, 62, 0.897);
    border-radius: 50%;
    .num {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .value {
        font-size: 16px;
        line-height: 30px;
      }
    }
  }
}
</style>
